<template>
  <div class="calculator-container">
    <div class="calculator-content">
      <div class="calculator-header">
        <div class="list" style="height:80%">
          <span v-for="(item,index) in list" :key="index">{{item}}</span>
        </div>
        <div class="inp" style="height:20%">
          <input type="text" v-model="inp" />
        </div>
      </div>
      <div class="calculator-operate">
        <div class="item other" @click="clear()">c</div>
        <div class="item other" @click="divide()">÷</div>
        <div class="item other" @click="multi()">×</div>
        <div class="item other" @click="remove()">←</div>
        <div class="item number" @click="operate('7')">7</div>
        <div class="item number" @click="operate('8')">8</div>
        <div class="item number" @click="operate('9')">9</div>
        <div class="item other" @click="sub()">–</div>
        <div class="item number" @click="operate('4')">4</div>
        <div class="item number" @click="operate('5')">5</div>
        <div class="item number" @click="operate('6')">6</div>
        <div class="item other" @click="add()">+</div>
        <div class="item number" @click="operate('1')">1</div>
        <div class="item number" @click="operate('2')">2</div>
        <div class="item number" @click="operate('3')">3</div>
        <div class="item equal other" @click="merge('=')">=</div>
        <div class="item zero number" @click="operate('0')">0</div>
        <div class="item number" @click="operate('.')">.</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      inp: 0,
      list: [],
      regex: /[+–×÷]$/,
      total: 0
    };
  },
  methods: {
    // 值
    operate(val) {
      if (this.inp == 0) {
        this.inp = val;
      } else {
        this.inp += val;
      }
    },
    // 合并数值
    merge() {},
    // 除
    divide() {
      if (this.regex.test(this.inp)) {
        this.inp = this.inp.substring(0, this.inp.length - 1) + "÷";
      } else {
        this.inp += "÷";
      }
    },
    // 乘
    multi() {
      if (this.regex.test(this.inp)) {
        this.inp = this.inp.substring(0, this.inp.length - 1) + "×";
      } else {
        this.inp += "×";
      }
    },
    // 减
    sub() {
      if (this.regex.test(this.inp)) {
        this.inp = this.inp.substring(0, this.inp.length - 1) + "–";
      } else {
        this.inp += "–";
      }
    },
    // 加
    add() {
      if (this.regex.test(this.inp)) {
        this.inp = this.inp.substring(0, this.inp.length - 1) + "+";
      } else {
        this.inp += "+";
      }
    },
    remove() {},
    clear() {
      this.inp = 0;
    }
  }
};
</script>

<style lang="scss">
.calculator {
  &-container {
    margin: 30px;
  }

  &-content {
    width: 375px;
    height: 600px;
    background-color: #fff;
    margin: 0 auto;
  }

  &-header,
  &-operate {
    height: 50%;
  }

  &-header {
    color: #fff;
    background-color: #000;
    text-align: right;
    padding-right: 10px;

    .list {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    input {
      width: 100%;
      color: #ffffff;
      outline: none;
      background-color: #000000;
      border: none;
      text-align: right;
      height: 100%;
      padding: 1px;
    }
  }

  &-operate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: #eef0f3;
    .item {
      font-size: 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      margin: 1px;
    }
    .zero {
      grid-column: span 2;
    }
    .equal {
      grid-row: span 2;
    }

    .number {
      background-color: #fff;
    }

    .other {
      background-color: #cadde8;
    }

    .number:hover {
      cursor: pointer;
      background-color: #cadde8;
    }
    .other:hover {
      cursor: pointer;
    }
  }
}
</style>